import { useState, useEffect } from 'react'
/* -------------------------------------------------------- antd -- */
import { TreeSelect } from 'antd'
/* -------------------------------------------------------- Declare -- */
const { $fn } = window

const updateTreeData = (data, value, children) => data.map( node => {
	if (node.value === value) {
		return { ...node, children }
	}
	if (node.children) {
		return {
			...node,
			children: updateTreeData( node.children, value, children )
		}
	}
	return node
})
/* -------------------------------------------------------- 回到顶部 -- */
const Index = ({ 
	className,						/** @param {String}				# 盒子 className */
	style, 							/** @param {String}				# 盒子 style */
	// size='small', 					/** @param {String}				# 大小 */
	name, 							/** @param {String}				# name */
	p,								/** @param {String}				# 提示语 */
	hint='请选择',					/** @param {String}				# 提示语 */
	label='',						/** @param {String}				# 标签名 */
	width,							/** @param {String}				# 宽度 */
	out,							/** @param {Number}				# 在外部设置 value */
	mul,							/** @param {Boolan, Number}		# 是否多选 */
	check,							/** @param {Boolan}				# 是否多选框选择 */
	expand,							/** @param {Boolan, Number}		# 是否展开树 */
	count=3,						/** @param {Number}				# 显示最多 tags */
	//
	value,							/** @param {String}				# 值 */
	disabled,						/** @param {Boolan}				# 禁用 */
	readOnly,						/** @param {Boolan}				# 只读 */
	allowClear=true,				/** @param {Boolan}				# 显示清除按钮 */
	// 获取值
	onChange,						/** @param {Event}				# 有 Form 时值改变时执行 */
	onChanged,						/** @param {Event}				# 值改变时执行 */
	// 自定义扩展
	antd = {},						/** @param {Object}				# antd */
	// data
	api,							/** @param {String}				# 获取数据的 api */
	param,							/** @param {Object}				# api 参数 */
	paging,							/** @param {Object}				# 是否分页*/
	data,							/** @param {Array}				# 数据 */
	idStr='id',						/** @param {String}				# 提交字段名 */
	nameStr='title',				/** @param {String}				# 显示字段名 */
	cache,							/** @param {Boolan}				# 是否缓存 */
}, ref)=> {// eslint-disable-line
	// value = check || mul ? ( value ? value : []) : (value ? value : null)
	let [ model, setModel ] = useState(value)
	let [ ajax, setAjax ] = useState( data )
	
	p = p ? p : hint + label
	let isLazy = Array.isArray(api)
	
	// className = `jzer-select-${size} ${$.css(className)}`
	antd = { 
		className, disabled, readOnly, allowClear, 
		value: model,
		placeholder: p, 
		showSearch:!isLazy,
		treeCheckable: check,
		// showCheckedStrategy:TreeSelect.SHOW_ALL,
		// treeLine:false,
		multiple: mul,
		treeDefaultExpandedKeys: check || mul ? value : [value],						// 展开选中树
		treeDefaultExpandAll: expand === 1,					// 默认展开所有树节
		treeNodeFilterProp: 'title',						// 输入项过滤对应的 treeNode 属性
		treeNodeLabelProp: nameStr,							// 要显示的字段名
		fieldNames: { label:nameStr, value: idStr, children:'children' },	// 自定义字段
		treeData : ajax,
		virtual: ajax?.length > 30,
		maxTagCount:count,
		style: { minWidth:width, ...style},
		...antd
	}
	
	useEffect(()=> { if( !out ) { setModel( value ) } }, [ value ]) // eslint-disable-line
	
	useEffect(() => { $fn.ajax({setAjax, data:ajax, api: isLazy ? api[0] : api, cache, paging, param}) }, []) // eslint-disable-line
	
	const _onChange = (value, label) => {
		if(!out){ setModel( value ) }
		let result = name ? { model: {[name]: value} } : null
		onChange?.( value )
		onChanged?.({ value, label: label[0], ...result  })
	}
	
	const onLoadData = isLazy ? ({value, pos, children}) => {
		const index = pos.split('-').length - 1;
		return new Promise( resolve =>{
			if (children) {
				resolve()
				return
			}
			window.$http.pull(null, api[index], { id: value }).then( data =>{
				if(index === api.length - 1){
					data.forEach(v => v.isLeaf = true )
				}
				setAjax( v => updateTreeData( v, value, data ) )
				resolve()
			})
		})
	} : null
	
	return  <TreeSelect onChange={_onChange} {...antd} loadData={onLoadData} />
}

export default Index